<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>校园二手交易平台</title>
	<link rel="stylesheet" type="text/css" href="/css/index.css">
</head>
<body>

	<!-- 导航 -->
	<header class="navbar">
		<div class="nav-info">
			<a class="username" href="infomation.html">用户</a>
			<a class="goodsshelf" href="/register.html">||&nbsp;&nbsp;&nbsp;注册</a>
			<a class="goodshelf" href="cart.html">||&nbsp;&nbsp;&nbsp;我的购物车</a>
			<a class="logout" href="/register.html">[ 退 出 ]</a>
		</div> <!-- nav-info -->
		<form class="nav-search">
            <a><img class="logo" src="/image/title.jpg"></a>
			<div class="search-form">
				<a class="search-logo">| &nbsp;<img src="/image/search.png"></a>
				<input type="search" class="searchIn" placeholder="搜二手物品...">
				<button class="searchBtn">搜索</button>
			</div>
		</form><!--  nav-search -->
		<ul class="menu">
			<li><a class="active" href="main.html">首页</a></li>
			<li><a href="goods.html">二手商品</a></li>
			<li><a href="request.html">求购区</a></li>
		</ul>			
	</header>


	<!-- 轮播 -->
	<div class="carousel">
		<div class="goods-guide">
			<h4>物品分类</h4>
			<ul class="goods-class">
				<li><a href="#book" title="二手书籍">书籍</a></li>
				<li><a href="#bed" title="床上用品">床上用品</a></li>
				<li><a href="#wash" title="洗漱用品">洗漱用品</a></li>
				<li><a href="#bike" title="交通工具">交通工具</a></li>					
				<li><a href="#other" title="其他">其他</a></li>							
			</ul>
		</div>
		<div class="slider">
			<div class="slider-img">
				<ul class="slider-img-ul">
					<li><img src="/image/carousel/5.jpg"></li>
					<li><img src="/image/carousel/1.jpg"></li>
					<li><img src="/image/carousel/2.jpg"></li>
					<li><img src="/image/carousel/3.jpg"></li>
					<li><img src="/image/carousel/4.jpg"></li>
					<li><img src="/image/carousel/5.jpg"></li>
					<li><img src="/image/carousel/1.jpg"></li>
				</ul>
			</div>
		</div>
		<div class="goods-guide">
			<a class="welcome">Hi~欢迎光临！</a><br/>
			<img src="/image/ran.png">
			<p>
				<a href="/register.html" class="user_login">登录</a>
				"&nbsp;|&nbsp;"
				<a href="/register.html" class="user_reg">注册</a>
			</p>
		</div>	
	</div>

		<!-- 商品分类 -->
		<div id="container">
			<div class="goods-part" id="book">
				<h3 class="goods-title"><a href="#">书籍</a></h3>
				<a class="more" href="goods.html" > 更多</a>
				<ul class="goods-lists">
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="//book.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">计算机组成原理</h5>
							<span class="goods-detail">唐朔飞 著 第二版</span>
							<h5 class="goods-price">￥10.1</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>
	
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/book1.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">计算机网络</h5>
							<span class="goods-detail">谢希仁 著 第七版</span>
							<h5 class="goods-price">￥13.8</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>				
				</ul>
			</div>

			<div class="goods-part" id="bed">
				<h3 class="goods-title"><a href="#">床上用品</a></h3>
				<a class="more" href="goods.html"> 更多</a>
				<ul class="goods-lists">
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/bed1.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">床上三件套</h5>
							<span class="goods-detail">颜色深蓝 无异味</span>
							<h5 class="goods-price">￥100.1</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>
	
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/bed2.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">被套</h5>
							<span class="goods-detail">条纹 整洁无异味</span>
							<h5 class="goods-price">￥38.8</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>				
				</ul>
			</div>

			<div class="goods-part" id="wash">
				<h3 class="goods-title"><a href="#">洗漱用品</a></h3>
				<a class="more" href="goods.html"> 更多</a>
				<ul class="goods-lists">
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/lux.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">沐浴露</h5>
							<span class="goods-detail">力士沐浴露 玫瑰花香 九成新</span>
							<h5 class="goods-price">￥5.9</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>
	
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/lux1.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">强生牛奶沐浴露</h5>
							<span class="goods-detail">七成新 女生自用</span>
							<h5 class="goods-price">￥8.8</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>	
					
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/lux2.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">舒肤佳</h5>
							<span class="goods-detail">品质保证 未开封</span>
							<h5 class="goods-price">￥8.8</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>				
				</ul>
			</div>

			<div class="goods-part" id="bike">
				<h3 class="goods-title"><a href="#">交通工具</a></h3>
				<a class="more" href="goods.html" > 更多</a>
				<ul class="goods-lists">
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/bike.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">自行车</h5>
							<span class="goods-detail">浅蓝 七成新</span>
							<h5 class="goods-price">￥100.9</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>
	
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/bike1.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">平衡车</h5>
							<span class="goods-detail">保修 六成新</span>
							<h5 class="goods-price">￥400.8</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>				
				</ul>
			</div>

			<div class="goods-part" id="other">
				<h3 class="goods-title"><a href="#">其他</a></h3>
				<a class="more" href="goods.html" > 更多</a>
				<ul class="goods-lists">
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/ob1.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">滑板</h5>
							<span class="goods-detail">九成新</span>
							<h5 class="goods-price">￥100.9</h5>
						</a>
						<span>						
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>

					</li>
	
					<li class="goods-list">
						<a href="detail.html" class="goods-pic">
							<img src="/image/ob2.jpg">
						</a>
						<a href="detail.html" class="goods-info">
							<h5 class="goods-name">联想笔记本</h5>
							<span class="goods-detail">可保修 七成新 无磕碰痕迹</span>
							<h5 class="goods-price">￥1000.8</h5>
						</a>
						<span>
							<a href="detail.html" class="goods-buy">立即下单</a>
							<a href="#" class="goods-buy">添加到购物车</a>
						</span>
					</li>				
				</ul><!--  goods-list end -->
			</div><!--  goods-part end -->

		</div>

		

	<footer>
		<a href="#">©2021-7 二手物品交易</a>
		<a href="#">意见反馈&nbsp;&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;隐私权声明&nbsp;&nbsp;&nbsp;使用条款</a>
	</footer>
	<script type="text/javascript" src="/js/jquery-3.2.js"></script>
	<script type="text/javascript" src="/js/xSlider.js"></script>
	<script type="text/javascript">
		$(function(){

			$(".goods-class li a").on("click",function(){
				var classId = $(this).prop("title");
				console.log(classId);
				var classTop =  $("#container").find(("#"+classId)).offset().top; 
				$("html,body").animate({scrollTop:classTop+ "px"}, 500);
			});
		})		
	</script>
</body>
</html>